<template>
	<view class="prefer-content">
		<scroll-view scroll-x="true" class="scroll" scroll-with-animation="true">
			<view class="prefer-dis">
				<block v-for="(item, index) in preferdata" :key="index">
					<view class="prefer-view">
						<image :src="item.image" mode="aspectFill"></image>
						<text>{{item.title}}</text>
						<text>{{item.lable}}</text>
					</view>
				</block>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			preferdata: Array
		},
	}
</script>

<style scoped>
	.prefer-content {
		margin: 30upx 0;
	}
	.scroll {
		white-space: nowrap;
		width: 100%;
		height: 300upx;
	}

	.prefer-dis {
		display: flex;
		justify-content: space-between;
	}

	.prefer-view {
		height: 300upx;
		width: 300upx;
		padding: 0 8upx;
	}

	.prefer-view image {
		width: 300upx;
		height: 200upx;
		border-radius: 8upx;
	}

	.prefer-view text {
		height: 45upx;
		line-height: 45upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.prefer-view text:nth-child(2) {
		font-size: 30upx;
	}

	.prefer-view text:nth-child(3) {
		font-size: 27upx;
		color: #9c9c9c;
	}

	.prefer-dis view:nth-child(2) {
		padding: 0 7upx !important;
	}
</style>
